<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<b>/<img src="../assets/img/settlement.png" />充值记录</b>
		</div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitdd invoiceManage table-drop" shadow="hover">
					<div class="search">
					<el-input
						placeholder="企业名称"
						v-model="searchVal"
					></el-input>
					<el-date-picker
						v-model="value1"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						range-separator="~">
					</el-date-picker>
					<el-select v-model="rechargeType" placeholder="充值类型">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<el-button type="primary" @click="search()">查询</el-button>
					</div>
					<div class="tabNav" style="margin: 5px 0 10px 20px; display: none;">
						<em>
							&nbsp;平台名称：{{SelectPlatformData.platformBusinessName}}，平台开户行：{{SelectPlatformData.bankName}}，平台银行账号：{{SelectPlatformData.bankNo}}，余额：<strike>￥{{ SelectPlatformData.balance }}</strike>，冻结金额：<strike>￥{{ SelectPlatformData.freezeBalance }}</strike>，可用余额：<strike>￥{{ SelectPlatformData.remainBalance }}</strike>。</em>
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="id" sortable="custom" width="100" label="序号">
						</el-table-column>
						<el-table-column prop="businessName" sortable="custom" width="300" label="企业名称">
						</el-table-column>
						<el-table-column prop="bankName" sortable="custom" label="开户行">
						</el-table-column>
						<el-table-column prop="bankNo" sortable="custom" width="150" label="银行账号">
						</el-table-column>
						<!-- <el-table-column prop="socialCreditCode" sortable="custom" width="150" label="统一社会信用代码">
						</el-table-column> -->
						<!-- <el-table-column prop="balance" sortable="custom" label="余额">
							<template #default="item">
								{{ formatNumber(item.row.balance) }}
							</template>
						</el-table-column> -->
						<el-table-column prop="rechargeAmount" sortable="custom" width="120" label="充值金额">
							<template #default="item">
								{{ formatNumber(item.row.rechargeAmount) }}
							</template>
						</el-table-column>
						<el-table-column prop="rechargeType" sortable="custom" label="充值类型">
							<template #default="item">
								{{ options1[item.row.rechargeType] }}
							</template>
						</el-table-column>
						<el-table-column prop="rechargeDsc" sortable="custom" label="充值描述">
						</el-table-column>
						<el-table-column prop="createTime" sortable="custom" label="充值时间" width="150">
							<template #default="item">
							<span v-if="item.row.createTime == null">--</span>
							<span v-else>{{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}</span>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="renwuTotals">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "dashboard",
		data() {
			return {
				settlementStatus: {
					// 结算状态
					1: "未打款",
					2: "已打款",
					3: "已作废",
				},
				// {
				// value: '',
				// label: '全部'
				// },
				options: [{
				value: '1',
				label: '充值'
				},{
				value: '2',
				label: '退款'
				},],
				options1: {
					1: "充值",
					2: "退款",
				},
				excelDownloadShow: false,
				SelectPlatformData: {}, // 灵活用功平台信息
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				renwuTotals: 0, // 结算任务明细总条数
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				tableData1: [],
				renwuTotal: 0, // 结算任务明细总条数
				renwuCurrentPage: 1, // 结算任务明细当前页
				renwuArrPage: [10, 20], // 结算任务明细每页条数
				renwuSelectPage: 10, // 结算任务明细每页选中条数
				settlementDetailArr: [], // 任务结算明细table数据
				settlementDetailShow: false, // 是否显示结算任务明细
				value: '',
				value1: '',
				searchVal: '',
				rechargeType: '',
				startTime: '',
				endTime: '',
				serveTime: '',
				auditStatus: {
					0: '待审核'
				},
				id: '',
				busid: ''
			};
		},
		components: {},
		mounted() {
			// this.getTableData();
			this.getSelectPlatform()
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},

		methods: {
			search(){
				this.getSelectPlatform();
			},
			handleSizeChange(val) {
				this.selectPage = val
				this.getSelectPlatform()
			},
			handleCurrentChange(val) {
				// 切换当前页
				this.currentPage = val
				this.getSelectPlatform()
			},
			getSelectPlatform() {
				if(this.value1){
					this.endTime = this.value1[1]
					this.startTime = this.value1[0]
				}else {
					this.endTime = ''
					this.startTime = ''
				}
				// 平台端查询企业充值记录
				this.$http({
					url: '/api/quick/recharge/platform/recordPage',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						rechargeType: this.rechargeType,
						startTime: this.startTime,
          				endTime: this.endTime,
						businessName: this.searchVal,
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.tableData = data.result.list
						this.renwuTotals = data.result.total
					}
				})
			},
			settlementDetails(id, busid) {
				// 结算任务明细
				this.id = id
				this.busid = busid
				this.settlementDetailShow = true
				this.getRenwuTableData(1, 10)
			},
			renwuCurrentChange(val) {
				// 结算任务明细切换分页
				this.renwuCurrentPage = val
				this.getRenwuTableData(this.renwuCurrentPage, 10)
			},
			renwuPageChange(val) {
				// 结算任务明细切换当前页显示条数
				this.renwuSelectPage = val
				this.renwuCurrentPage = 1
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
			openUrl(url) {
				// console.log(url.slice(5))
				// 打开新窗口查看协议
				if(url === '' || url === null || url === undefined) return
				let str = url.substring(0, url.indexOf('?'))
				let suffix = str.substring(str.lastIndexOf('.'), url.length)
				if(suffix === '.PDF' || suffix === '.pdf') {
					window.open(url)
				}else {
					let newwin = window.open();
					newwin.document.write("<img src=" + url + " />");
				}
			},
			getTableData() {
				// 查询平台银企直联打款配置
				this.$http({
					url: '/api/quick/bank/selectBankParam',
					method: 'get',
					headers: {
						'Content-Type': 'application/json'
					},
				}).then(data => {
					if(data.code === 0) {
						this.SelectPlatformData = data.result
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "legalName"|| d.id == "receiveBank") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getTableData();
			},
			sortChange1(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "taskName"|| d.id == "legalName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
		}
	};
</script>
<style scoped>
.tabNav strike {
	color: #dd0b01;
    font-weight: bold;
    text-decoration: none;
}
.cardTit {
    color: rgba(10, 46, 106, 1);
    line-height: 50px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: normal;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 10px;
    cursor: pointer;
    z-index: 111;
}
.serveTime {
	float: left;
    margin-left: 50px;
    position: relative;
    top: 10px;
}
.showCloro {
	cursor: pointer;
	color: #326CF0;
    text-align: left;
}
</style>